<template>
  <el-table :data="tableData" border style="width: 100%" size='mini' :span-method="objectSpanMethod">
    <el-table-column prop="type" label="服务类型" width="150">
      <template slot-scope="scope">
        <span>{{scope.row.type==1?'精装':'毛坯'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="areaText" label="面积(平米)" width="180"></el-table-column>
    <el-table-column prop="duration" label="服务时长(分钟)"></el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-button @click="addTime('edit',scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="delTime(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      tableData: []
    };
  },
  created(){
    this.selectList()
    this.$root.$on('saveT',(data)=>{
      this.selectList()
    })
  },
  methods:{
      addTime(type,row){ //编辑时间
        this.$root.$emit('addTime',type,row)
      },
      delTime(row){ //删除时间段
        let that=this 
        request.delAlert({
            name:'删除该时间段',
            that,
            fn(obj){
                let url='service/times/'+row.id+'?greenToken='+request.greenToken
                request.ajaxDel({
                  url,
                  that,
                  fn(res){
                    that.$message(obj)
                    that.selectList()
                  }
                })
            }
        })
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        //合并单元格
        if (columnIndex === 0 ) {
            if(this.spanArr[rowIndex]){
                return {
                    rowspan:this.spanArr[rowIndex],
                    colspan:1
                }
            }else{
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        }
      },
      selectList(){
        let that=this;
        let url='service/times';
        request.ajaxGet({
            url,
            that,
            fn(res){
              console.log(res)
              for(let i in res){
                res[i].start=parseInt(res[i].areaText.split("~")[0])
              }
              res.sort((a,b)=>a.start-b.start)
              let j=0;
              let m=0; //组装合并单元格的数组
              let obj={jz:[],mp:[]};
              for(let i in res){
                if(res[i].type=='1'){
                  j++;
                  obj.jz.push(res[i]);
                }else{
                  m++;
                  obj.mp.push(res[i]);
                }
              }
              let arr=[]
              if(j!=0){
                arr.push(j)
                for(let i=0;i<j-1;i++){
                  arr.push(0)
                }
              }
              if(m!=0){
                arr.push(m)
                for(let i=0;i<m-1;i++){
                  arr.push(0)
                }
              }
              let tableData=obj.jz.concat(obj.mp)
              that.spanArr=arr
              that.tableData=tableData
            }
        })
      }
  }
};
</script>
